<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}项目管理系统{% endblock %}</title>
    <!-- 本地Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <!-- 本地Font Awesome -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
    <!-- 自定义全局CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!-- 自定义CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 56px;
            min-height: 100vh;
        }
        
        .navbar {
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            background: linear-gradient(to right, #1a2a3a, #324759) !important;
            min-height: 60px; /* 固定导航栏高度 */
            padding: 5px 0; /* 减小上下内边距 */
        }
        
        .navbar-brand {
            font-weight: 600;
            font-size: 1.3rem;
            color: #ffcc66 !important;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            padding: 8px 0;
        }
        
        .nav-link {
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            transition: all 0.3s ease;
            color: #e0e6ec !important;
            margin: 0 2px; /* 添加一些水平间距 */
        }
        
        /* 确保菜单水平排列 */
        .navbar-nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap;
            height: 100%; /* 使菜单项占满导航栏高度 */
            align-items: center; /* 垂直居中对齐 */
        }
        
        .navbar-nav .nav-item {
            margin-right: 12px;
            position: relative;
            border-radius: 4px;
            display: inline-block !important;
            height: 100%; /* 使每个菜单项占满高度 */
            display: flex !important;
            align-items: center;
        }
        
        .navbar-nav .nav-item:last-child {
            margin-right: 0;
        }
        
        /* 菜单项悬停效果 */
        .nav-item:not(.active) .nav-link:hover {
            background-color: rgba(255,255,255,0.15);
            border-radius: 4px;
            color: #ffcc66 !important;
        }
        
        /* 激活的菜单项 */
        .nav-item.active {
            background-color: rgba(255,255,255,0.2);
            border-radius: 4px;
        }
        
        .nav-item.active .nav-link {
            color: #ffcc66 !important;
            font-weight: 600;
        }
        
        /* 固定内容高度防止抖动 */
        .content-wrapper {
            padding-top: 20px;
            min-height: calc(100vh - 150px); /* 减去导航栏和页脚的高度 */
        }
        
        /* 当点击菜单时防止页面抖动 */
        html {
            overflow-y: scroll;
        }
        
        .card {
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .card-header {
            border-bottom: 1px solid rgba(0,0,0,.125);
            background-color: #f8f9fa;
            padding: 12px 15px;
        }
        
        .card-header h5 {
            margin: 0;
            font-weight: 600;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .btn {
            border-radius: 4px;
            font-weight: 500;
        }
        
        .table th {
            background-color: #f8f9fa;
            border-bottom-width: 1px;
        }
        
        .table td, .table th {
            vertical-align: middle;
        }
        
        .btn-toolbar form {
            display: inline-block;
            margin-right: 5px;
        }
        
        .btn-toolbar form:last-child {
            margin-right: 0;
        }
        
        .page-title {
            margin-bottom: 20px;
            font-weight: 600;
            color: #343a40;
        }
        
        .footer {
            background-color: #fff;
            border-top: 1px solid #ddd;
            padding: 15px 0;
            margin-top: 40px;
        }
        
        /* 美化表单 */
        .form-group label {
            font-weight: 500;
        }
        
        .form-control:focus {
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        
        /* 美化卡片标题和操作区域 */
        .card-header-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 美化操作按钮 */
        .action-buttons form {
            display: inline-block;
            margin-right: 3px;
        }
        
        .action-buttons form:last-child {
            margin-right: 0;
        }
        
        /* 美化状态标签 */
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        /* 美化闪现消息 */
        .alert {
            border-radius: 6px;
            padding: 12px 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,.1);
            position: relative;
            overflow: hidden;
        }
        
        .alert::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
        }
        
        .alert-success {
            background-color: #e8f5e9;
            color: #1b5e20;
            border: none;
        }
        
        .alert-success::before {
            background-color: #28a745;
        }
        
        .alert-danger {
            background-color: #ffebee;
            color: #b71c1c;
            border: none;
        }
        
        .alert-danger::before {
            background-color: #dc3545;
        }
        
        .alert-warning {
            background-color: #fffde7;
            color: #bf8c00;
            border: none;
        }
        
        .alert-warning::before {
            background-color: #ffc107;
        }
        
        .alert-info {
            background-color: #e3f2fd;
            color: #0d47a1;
            border: none;
        }
        
        .alert-info::before {
            background-color: #17a2b8;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">项目管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto d-flex flex-row">
                    <li class="nav-item {% if request.path == url_for('project_list') %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('project_list') }}">
                            <i class="fas fa-project-diagram mr-1"></i> 项目列表
                        </a>
                    </li>
                    <li class="nav-item {% if request.path == url_for('config_deploy_types') %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('config_deploy_types') }}">
                            <i class="fas fa-server mr-1"></i> 部署类型
                        </a>
                    </li>
                    <li class="nav-item {% if request.path == url_for('config_project_categories') %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('config_project_categories') }}">
                            <i class="fas fa-tags mr-1"></i> 项目分类
                        </a>
                    </li>
                    <li class="nav-item {% if request.path == url_for('config_status') %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('config_status') }}">
                            <i class="fas fa-flag mr-1"></i> 项目状态
                        </a>
                    </li>
                    <li class="nav-item {% if request.path == url_for('user_list') %}active{% endif %}">
                        <a class="nav-link" href="{{ url_for('user_list') }}">
                            <i class="fas fa-users mr-1"></i> 用户管理
                        </a>
                    </li>
                </ul>
                <div class="user-info-wrapper d-flex align-items-center">
                    <div class="admin-info mr-3">
                        <i class="fas fa-user-shield"></i> 系统管理员
                    </div>
                    {% if session.user_id %}
                    <div class="logout-link">
                        <a href="{{ url_for('logout') }}" class="nav-link py-0">
                            <i class="fas fa-sign-out-alt mr-1"></i> 退出 ({{ session.username }})
                        </a>
                    </div>
                    {% else %}
                    <div class="login-link">
                        <a href="{{ url_for('login') }}" class="nav-link py-0">
                            <i class="fas fa-sign-in-alt mr-1"></i> 登录
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="content-wrapper">
        <div class="container">
            <!-- 闪现消息 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="alert alert-{{ category }}">
                    {% if category == 'warning' %}⚠️{% endif %}
                    {% if category == 'success' %}✅{% endif %}
                    {% if category == 'danger' %}❌{% endif %}
                    {% if category == 'info' %}ℹ️{% endif %}
                    {{ message }}
                  </div>
                {% endfor %}
              {% endif %}
            {% endwith %}
            
            <!-- 内容块 -->
            {% block content %}{% endblock %}
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container text-center">
            <p class="text-muted mb-0">&copy; 2023 项目管理系统</p>
        </div>
    </footer>

    <!-- 本地JavaScript文件 -->
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    
    <script>
    $(document).ready(function() {
        // 解决页面抖动问题
        if (window.innerWidth > document.documentElement.clientWidth) {
            // 已有滚动条
        } else {
            // 强制显示滚动条
            document.documentElement.style.overflowY = 'scroll';
        }
        
        // 确保导航菜单水平排列
        $('.navbar-nav').css('display', 'flex');
        $('.navbar-nav').css('flex-direction', 'row');
        $('.navbar-nav .nav-item').css('display', 'inline-block');
        
        // 修改：只对导航栏的列表进行样式调整，避免影响模态框
        $('.navbar-nav').css('display', 'flex');
        $('.navbar-nav').css('flex-direction', 'row');
        $('.navbar-nav').css('flex-wrap', 'wrap');
        $('.navbar-nav').css('list-style', 'none');
        $('.navbar-nav').css('padding-left', '0');
        
        $('.navbar-nav li').css('display', 'inline-block');
        $('.navbar-nav li').css('margin-right', '10px');
        
        // 为系统管理员和退出链接添加样式
        $('.user-info-wrapper').css('display', 'flex');
        $('.user-info-wrapper').css('align-items', 'center');
        
        // 修复表单样式，确保标签和输入框在同一行
        $('.form-group').css('display', 'flex');
        $('.form-group').css('align-items', 'center');
        $('.form-group').css('margin-bottom', '15px');
        
        $('.form-group label').css('min-width', '100px');
        $('.form-group label').css('text-align', 'right');
        $('.form-group label').css('margin-right', '10px');
        $('.form-group label').css('margin-bottom', '0');
        
        $('.form-group .form-control, .form-group .input-group').css('flex', '1');
        
        // 特殊处理部署信息表单
        $('.field-row').css('display', 'flex');
        $('.field-row').css('align-items', 'center');
        $('.field-row').css('margin-bottom', '15px');
        
        $('.field-row label').css('min-width', '100px');
        $('.field-row label').css('text-align', 'right');
        $('.field-row label').css('margin-right', '10px');
        $('.field-row label').css('margin-bottom', '0');
        
        $('.field-row .icon').css('width', '30px');
        $('.field-row .icon').css('text-align', 'center');
        $('.field-row .icon').css('margin-right', '5px');
        
        $('.field-row input, .field-row select, .field-row textarea').css('flex', '1');
        
        // 确保模态框正常工作
        $('.modal').modal({
            backdrop: true,
            keyboard: true,
            focus: true,
            show: false
        });
        
        // 修复模态框导致的页面抖动
        $(document).on('show.bs.modal', '.modal', function () {
            $(document.body).addClass('modal-open');
        });
        
        $(document).on('hidden.bs.modal', '.modal', function () {
            if($('.modal:visible').length) {
                $(document.body).addClass('modal-open');
            }
        });
        
        // 全局编辑按钮处理
        $(document).on('click', '.edit-btn', function() {
            var target = $(this).data('target');
            if (target) {
                $(target).modal('show');
            }
        });
        
        // 确保添加按钮也能正常工作
        $(document).on('click', '[data-toggle="modal"]', function() {
            var target = $(this).data('target');
            if (target) {
                $(target).modal('show');
            }
        });
        
        // 确保关闭按钮能正常工作
        $(document).on('click', '[data-dismiss="modal"]', function() {
            $(this).closest('.modal').modal('hide');
        });
        
        // 为模态框添加Escape键关闭功能
        $(document).on('keydown', function(e) {
            if (e.keyCode === 27) { // ESC key
                $('.modal.show').modal('hide');
            }
        });
    });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html> 